<template>
	<view>
		<view class="head_sty">
			<view class="" style="margin: 120rpx 20rpx 0 40rpx; display: flex;">
				<view class="img_sty"></view> 
				<view class="" >
					<view class="top_font">
						狗改不了咬拖鞋
					</view>
					<view class="bot_sty">
						开通会员，即刻解锁全部特权
					</view>
				</view>
			</view>
			
		</view>
		<view class="conter_sty">
			<view class="headline">
				加入会员
			</view>
			<view class="member_list">
				<view class="left_mod">
					
				</view>
				<view class="conter_mod">
					<view class="center_top">
						V1会员
					</view>
					<view class="center_bot">
						购买可得5000购物兑换券
					</view>
				</view>
				<view class="right_mod">
					￥5000元<br>
					+<br>
					1500积分
					
				</view>
			</view>
			<view class="explain">
				会员说明
			</view>
			<view class="content">
				      这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明，这是会员说明。
			</view>
			<router-link to="/bundle/pages/recharge_page/recharge_page">
				<view class="but">
					立即充值
				</view>
			</router-link>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.head_sty{
		width: 750rpx;
		height: 370rpx;
		background-color: #0271E4;
		display: flex;
		.img_sty{
			width:80rpx; 
			height: 80rpx;
			background-color: #fff;
			border-radius: 50%;
			margin-right: 20rpx;
			
		}
		.top_font{
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}
		.bot_sty{
			font-weight: 400;
			font-size: 26rpx;
			color: #BEDEFF;
		}
	}
	.conter_sty{
		width: 750rpx;
		// margin-left: 20rpx;
		// height: 800rpx;
		margin-top: -60rpx;
		background: #F6F6F6;
		border-radius: 40rpx;
		.headline{
			width:200rpx;
			height: 120rpx;
			// background-color: #BEDEFF;
			text-align: center;
			line-height: 120rpx;
			font-weight: 400;
			font-size: 38rpx;
			color: #333333;
		}
		.member_list{
			width: 710rpx;
			height: 180rpx;
			margin:0 0 20rpx 20rpx;
			border-radius: 20rpx;
			background-color: #BEDEFF;
			display: flex;
			align-items: center;
			.left_mod{
				width: 158rpx;
				height: 142rpx;
				
			}
			.center_top{
				font-weight: bold;
				font-size: 32rpx;
				color: #333333;
			}
			.center_bot{
				font-weight: 400;
				font-size: 24rpx;
				color: #666666;
			}
			.right_mod{
				font-weight: bold;
				font-size: 32rpx;
				color: #0271E4;
				text-align: center;
				margin-left: 80rpx;
			}
			
		}
		.explain{
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			margin:0 0 30rpx 20rpx;
			
		}
		.content{
			width: 643rpx;
			margin-left: 50rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			text-indent:48rpx
		}
		.but{
			width: 558rpx;
			height: 87rpx;
			background: #0271E4;
			border-radius: 44rpx 44rpx 44rpx 44rpx;
			margin:300rpx 0 0 96rpx;
			text-align: center;
			line-height: 87rpx;
			color: #fff;
		}
	}
</style>
